<template>
  <div id="index">
    
    <div id="pages">
      <router-view></router-view>
    </div>

    <div id="tabbar">
      <van-tabbar v-model="tabbarActive" @change="onTabbarChange" :fixed="false" route>
        <van-tabbar-item name='home' icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item name='category' icon="apps-o" to="/cate">分类</van-tabbar-item>
        <van-tabbar-item name='cart' icon="shopping-cart-o" to="cart">购物车</van-tabbar-item>
        <van-tabbar-item name='my' icon="friends-o" to="my">我的</van-tabbar-item>
      </van-tabbar>
    </div>

  </div>
</template>
<style scoped lang='scss'>
#index {
  width: 100%;
  height: 100%;
  #pages {
    height: calc(100% - 50px);
    overflow-y: scroll;
  }
  #tabbar {
    height: 50px;
  }
}

</style>
<script lang="ts">
// @ is an alias to /src
import { Component, Prop, Vue, Watch, Model } from 'vue-property-decorator';
import {Tabbar, TabbarItem} from 'vant';
import store from '../store/index';

Vue.use(Tabbar).use(TabbarItem);

@Component
export default class IndexComponent extends Vue {
  private readonly tabbarActive: string = 'home';
  private global: any = {
    showPageLoading: false
  };
  
  async created(){
    this.global=store.getters['global/getGlobal'];
  }

  private onTabbarChange(index){
    console.log(index)
  }
}
</script>
